<template>
  <div class="footer-container">
    <div class="footer-container__inner">
      <timeout-cell :time="1000" :iteration="true" class="slideInDown footer-top">
        <div class="footer-top__contact-us">
          联系我们
        </div>
        <div class="footer-top__mode">
          <div class="footer-top-mode__cell">
            <div class="footer-top-mode__cell-icon skype"></div>
            <div class="footer-top-mode__cell-info">
              <span>Skype&nbsp;:</span>
              <div>beibo2018@outlook.com</div>
              <div>beibo2019@outlook.com</div>
            </div>
          </div>
          <div class="footer-top-mode__cell">
            <div class="footer-top-mode__cell-icon telegram"></div>
            <div class="footer-top-mode__cell-info">
              <span>telegram&nbsp;:</span>
              <div>ballbetpartner</div>
            </div>
          </div>
        </div>
        <div class="footer-top__mode">
          <div class="footer-top-mode__cell">
            <div class="footer-top-mode__cell-icon mail"></div>
            <div class="footer-top-mode__cell-info">
              <span>邮箱&nbsp;:</span>
              <div>beibo8888@gmail.com</div>
            </div>
          </div>
          <div class="footer-top-mode__cell">
            <div class="footer-top-mode__cell-icon qq"></div>
            <div class="footer-top-mode__cell-info">
              <span>QQ&nbsp;:</span>
              <div>1623630253</div>
            </div>
          </div>
        </div>
      </timeout-cell>
      <timeout-cell :time="1600" :iteration="true" class="slideInDown footer-bottom">
        <div class="footer-bottom-item">
          <span class='footer-bottom-item__icon footer-bottom-item__icon--about'></span>
          <router-link tag="div" :to="{path: '/about-us/about-us'}" class="footer-bottom-item__title">关于我们</router-link>
        </div>
        <div class="footer-bottom-item">
          <span class='footer-bottom-item__icon footer-bottom-item__icon--commison'></span>
          <router-link tag="div" :to="{path: '/about-us/commission'}" class="footer-bottom-item__title">佣金方案</router-link>
        </div>
      </timeout-cell>
    </div>
  </div>
</template>

<script>
export default {
  name: "home-footer"
};
</script>

<style lang="scss" scoped>
$--font-family: "MicrosoftYaHeiUI";
@include b(footer-container) {
  height: 100%;
  @include utils-bg(url("./img/footer_bg.png") no-repeat);
  background-size: cover;
  @include e(inner) {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    padding-top: 221px;
    @include b(footer-top) {
      @include e(contact-us) {
        font-size: 46px;
        font-family: $--font-family;
        font-weight: 400;
        color: #ffffff;
      }
      @include e(mode) {
        margin-top: 44px;
        font-size: 18px;
        font-weight: 400;
        line-height: 20px;
        color: #ffffff;
        width: 862px;
        display: flex;
        @include e(line) {
          height: 15px;
          width: 1px;
          background: #ffffff;
        }
      }
    }
    @include b(footer-top-mode){
      @include e(cell){
        display: flex;
        margin-bottom: 15px;
        width: 400px;
        
      }
      @include e(cell-icon){
        width: 36px;
        height: 36px;
        margin-right: 13px;
        &.skype{
          background: url(./img/skype.png) center/contain no-repeat;
        }
        &.telegram{
          background: url(./img/telegram.png) center/contain no-repeat;
        }
        &.qq{
          background: url(./img/qq.png) center/contain no-repeat;
        }
        &.mail{
          background: url(./img/mail.png) center/contain no-repeat;
        }
      }
      @include e(cell-info){
        margin-top: 10px;
        span{
          font-size: 18px;
        }
        >div{
          font-size: 16px;
          color: #B6B6B6;
          line-height: 25px;
          margin-top: 10px;
        }
      }
    }
    @include b(footer-bottom) {
      padding-top: 94px;
      display: flex;
      justify-content: space-between;
      width: 862px;
      @include b(footer-bottom-item) {
        /*flex: 0 0 186px;*/
        width: 274px;
        height: 150px;
        background: #2D3434;
        border-radius: 8px;
        position: relative;
        @include e(title) {
          position: absolute;
          width: 195px;
          height: 58px;
          background-image: linear-gradient(270deg, #0073FF 0%, #4366FF 100%);
          box-shadow: 0 26px 42px 0 rgba(0,0,0,0.50);
          border-radius: 4px;
          font-size: 26px;
          color: #ffffff;
          font-family: $--font-family;
          text-align: center;
          line-height: 58px;
          top: 50%;
          right: -50%;
          transform: translate(-25%,-50%);
          cursor: pointer;
          transition: all 1s;
          &:hover{
            background-image: linear-gradient(270deg, #0105ff 0%, #0539ff 100%);;
          }
        }
        @include e(icon) {
          display: inline-block;
          height: 58px;
          margin: 45px 59px;
          @include m(commison) {
            width: 56px;
            background: url(./img/footer/footer_icon-commison-active.png) center/contain no-repeat;
          }
          @include m(together) {
            width: 66px;
          }
          @include m(about) {
            width: 56px;
            background: url(./img/footer/footer_icon-about-active.png) center/contain no-repeat;
          }
          @include m(wechat) {
            width: 178px;
            height: 178px;
          }
          @include m(problem) {
            width: 60px;
          }
        }
      }
    }
  }
}
</style>
